<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .body{
            text-align: center;
        }
        .box{
            height:1210px;
            width:1200px;
            margin: 0px auto;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div class="box" id="box"></div>
</body>
<script>
    var box=document.getElementById("box");
    for(var i=0;i<101;i++){
        for(var j=0;j<100;j++){
            var b=document.createElement("div");
            b.style.border="1px solid black";
            b.style.width="10px";
            b.style.height="10px";
            b.style.cssFloat="left";
            box.appendChild(b);

            if(i%2==0){
                b.style.background="green";
            }
            else{
                b.style.background="red";
            }
            if(i==50 && j==50){
                b.style.background="";
                b.innerHTML="1";
            }
            if(i==99 && j==97){
                b.style.background="white";
                
            }
        }

    }
  

　　
</script>
</html>